<template>
    <div  style="padding: 20px; margin-left: 15px;">
        <h3>管理员修改</h3>
        <div style="margin-top: 20px;">
            <el-form
                ref="ruleFormRef"
                :model="ruleForm.formdata"
                :rules="rules"
                label-width="120px"
                class="demo-ruleForm"
                :size="formSize"
                status-icon
            >
            <div class="left">
                <el-form-item label="管理员名称" prop="admin_name">
                    <el-input v-model="ruleForm.formdata.admin_name" placeholder="请输入管理员名称"/>
                </el-form-item>
                <el-form-item label="邮箱" prop="email">
                    <el-input v-model="ruleForm.formdata.email"  placeholder="请输入邮箱"/>
                </el-form-item>
                <el-form-item label="手机号" prop="mobile">
                    <el-input v-model="ruleForm.formdata.mobile"  placeholder="请输入手机号"/>
                </el-form-item>
                <el-form-item label="管理员密码" prop="pwd">
                    <el-input v-model="ruleForm.formdata.pwd"  placeholder="请输入管理员密码"/>
                </el-form-item>
                <el-form-item label="确认密码" prop="repwd">
                    <el-input v-model="ruleForm.formdata.repwd"  placeholder="请再次输入密码"/>
                </el-form-item>
            </div>
            <div class="right">
                <el-form-item label="真实姓名" prop="real_name">
                <el-input v-model="ruleForm.formdata.real_name"  placeholder="请输入您的真实姓名"/>
                </el-form-item>
                <el-form-item label="部门" prop="department">
                <!-- <el-select v-model="ruleForm.department" placeholder="请选择部门"> -->
                    <!-- <el-option label="Zone one" value="shanghai" />
                    <el-option label="Zone two" value="beijing" /> -->
                    <el-cascader v-model="ids" @change="departmentArr" :options="options" :props="props" />
                <!-- </el-select> -->
                </el-form-item>
                <el-form-item label="角色" >
                    <el-checkbox-group @change="getRole" v-model="roleArr">
                        <el-checkbox label="经管负责人" name="type" />
                        <el-checkbox label="部门负责人" name="type" />
                    </el-checkbox-group>
                </el-form-item>
                <el-form-item label="是否启用" prop="is_use">
                    <el-switch v-model="ruleForm.formdata.is_use" />
                </el-form-item>
                <el-form-item label="备注" prop="remarks">
                    <el-input v-model="ruleForm.formdata.remarks" type="textarea" placeholder="备注"/>
                </el-form-item>


                <el-form-item>
                <el-button @click="resetForm(ruleFormRef)">取消</el-button>
                <el-button type="primary" @click="submitForm(ruleFormRef)">修改</el-button>
                </el-form-item>
            </div>
                
            </el-form>
        </div>
    </div>
</template>

<script setup lang="ts">
    import { reactive, ref } from 'vue'
    import type { FormInstance, FormRules } from 'element-plus'
    import http from '../../api/privilege/admin'
    import router from '../../router/router';
    import {ElMessage} from 'element-plus'
    import { useRoute } from 'vue-router';

    const route=useRoute()

    let ids:any=ref(0||[])
    ids.value=route.query.department
    
    const formSize = ref('default')
    const ruleFormRef = ref<FormInstance>()
    const ruleForm = reactive({
        admin_id:route.query.admin_id,//管理员ID
        formdata:{
            admin_name: route.query.admin_name,//管理员名称
            email: route.query.email,//邮箱
            mobile: route.query.mobile,//手机号
            pwd: '',//管理员密码
            repwd: '',//确认密码
            real_name: route.query.real_name,//真实姓名
            department: route.query.department,//部门
            role: route.query.role,//角色
            is_use: route.query.is_use,//是否启用
            remarks: route.query.remarks,//备注
            wechat:'wx',//微信号
            qq:'11111',//QQ号
        }
    })
    // 校验
    const rules = reactive<FormRules>({
        admin_name: [
            { required: true, message: '请输入管理员名称', trigger: 'blur' },
        ],
        email: [
            { required: true, message: '请输入邮箱', trigger: 'blur' },
        ],
        mobile: [
            { required: true, message: '请输入手机号', trigger: 'blur' },
        ],
        pwd: [
            { required: true, message: '请输入密码', trigger: 'blur' },
        ],
        repwd: [
            { required: true, message: '请再次输入密码', trigger: 'blur' },
        ],
        real_name: [
            { required: true, message: '请输入真实姓名', trigger: 'blur' },
        ],
        departmentArr: [
            { required: true, message: '请选择部门', trigger: 'change' },
        ],
        roleArr: [
            { required: true, message: '请选择角色', trigger: 'change' },
        ],
        remarks: [
            { required: true, message: '请输入备注', trigger: 'blur' },
        ],
    })
    // 处理部门
    const departmentArr=(val:any)=>{
        // console.log(val.at(-1))
        ruleForm.formdata.department=val.at(-1)
        // console.log(ruleForm.department)
    }
    // 处理角色
    let roleArr=ref([])
    const getRole=(val:any)=>{
       if(val=='经管负责人'){
            ruleForm.formdata.role='1'
       }else if(val=='部门负责人'){
        ruleForm.formdata.role='2'
       }
    }
    // 修改
    const submitForm = async (formEl: FormInstance | undefined) => {
    if (!formEl) return
    await formEl.validate(async(valid, fields) => {
        if (valid) {
            // console.log(ruleForm)
            let res:any=await http.AdminEdit(ruleForm)
            if(res.code=='00000'){
                ElMessage({
                    type:'success',
                    duration:1000,
                    message:'添加成功'
                })
                router.push('/conservator')
            }else{
                ElMessage({
                    type:'error',
                    duration:1000,
                    message:res.msg
                })
            }
        } else {
            console.log('error submit!', fields)
        }
    })
    }
    // 取消
    const resetForm = (formEl: FormInstance | undefined) => {
    if (!formEl) return
        formEl.resetFields()
    }
    // 获取部门列表
    const props={
        value:'id',
        label:'name',
        children:'son'
    }
    const options:any=reactive([])

    const getDepartmentList=async()=>{
        let {data}=await http.DepartmentList()
        options.push(...data)
    }
    getDepartmentList()

</script>

<style lang="scss" scoped>
    .el-form{
        display: flex;
    }
    .el-form-item__content{
        margin-left: 100px;
    }
    .el-input{
        width: 380px;
        height: 36px;
    }
    .el-button{
        padding: 7px 15px;
        height: 28px;
    }
</style>